﻿<template>
    <div class="studentBack">
        <h2>学生姓名:{{name}}</h2>
        <h2>学生性别:{{sex}}</h2>
        <button @click="sendStudentName">把姓名给自己的父组件App</button>
        <button @click="unbind">解绑bilibili自定义事件</button>
        <button @click="death">销毁了当前Student实例对象(VueComponent)</button>
    </div>
</template>

<script>
    export default{
        name: 'Student',
        components:{},
        data() {
            return {
                name: '张三',
                sex: '男'
            }
        },
        methods: {
            sendStudentName(){
                //触发Student组件实例身上的bilibili事件
                this.$emit('bilibili',this.name,666,888,900)
            },
            unbind(){
                this.$off('bilibili')//这个只适用于解绑一个事件
            },
            death(){
                this.$destory()//销毁了当前Student实例对象(VueComponent),销毁后所有Student实例的自定义事件全都不奏效了
            }
        },
    }
</script>

<style scoped>
    .studentBack{
        background-color: pink;
    }
</style>